import {computed, defineComponent,useSlots} from "vue"
import type {VNode,Component} from "vue"
import "../style/container.scss"

export default defineComponent({

    setup(_,{slots}){

        const uSlots = useSlots()
        
        const isVertcial = computed(()=>{
            
            if(uSlots&&uSlots.default){
                let vNode:VNode[] = uSlots.default()
                // console.log(vNode,"vNode")
             return  vNode.some((vnode)=>{
                    const tag =(vnode.type as Component).name
                    // console.log(tag,"vnode")
                return tag === "ElHeader" || tag === "ElFooter"
                    
                })
            }else{
                return false
            }
           
        })

        return ()=>(
            <>
                <div class={[isVertcial.value?"vertical":'',"container"]}>
                    {
                        slots?.default?slots.default?.():''
                    }
                </div>
            </>
        )
        
    }
})